$pictos-background-default: white !default;
$pictos-default-border: null !default;
$pictos-default-gradient: null !default;

@mixin pictos($character,
    $color: #fff,
    $size: 24px,
    $glow: null, // (shadow 1)
    $border-color: $pictos-default-border,
    $border-color-over: $border-color,
    $border-color-active: $border-color,
    $color-hover: $bright-color,
    $gradient: matte,
    $gradient-over: $gradient,
    $gradient-active: recessed,
    $glow-hover: $bright-color 0 0 10px,
    $glow-active: $glow-hover,
    $shadow: rgba(#000, .5) 0 1px 1px,
    $include-states: true
) {
  @include background-clip(text);
  overflow: visible;
  @include text-shadow(rgba(#fff, .15) 0 1px 0);
  position: relative;
  height: $size;
  line-height: $size;

  &:after, &:before {
    @extend .base-pictos;
    font-size: $size;
    content: $character;
    @if $border-color != null {
      -webkit-text-stroke: 1px $border-color;
    }

    @include background-gradient($color, $gradient);
  }
  &:before {
    @include background-clip(padding-box);
    background: none;
  }

  @if $include-states {
    &:hover {
      @if $border-color-over != null {
        -webkit-text-stroke: 1px $border-color-over;
      }

      &:before {
        @include text-shadow($shadow, $glow-hover);
      }

      &:after {
        @include background-gradient($color-hover, $gradient-over);
      }
    }
    &:active {
      @if $border-color-active != null {
        -webkit-text-stroke: 1px $bright-color;
      }
      top: 1px;

      &:before {
        @include text-shadow($shadow, $glow-active);
      }

      &:after {
        @include background-gradient($bright-color, $gradient-active);
      }
    }
  }
}

@mixin simple-pictos($character, $color: #fff, $size: 24px) {
  overflow: visible;
  //    @include text-shadow(rgba(#fff, .15) 0 1px 0);
  position: relative;

  &:after {
    @include background-clip(text);
    @extend .base-pictos;
    font-size: $size;
    content: $character;
    @include background-gradient($color, matte);
  }
}

.base-pictos {
  font-family: Pictos;
  color: transparent;
  @include background-clip(text);
  position: absolute;
  top: 0;
  left: 0;
}